import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('Option 1', '/about', <PieChartOutlined />),
    getItem('Option 2', '/user', <DesktopOutlined />),
    getItem('User', '/Page1', <UserOutlined />, [
        getItem('Tom', '/Page1/page101'),
        getItem('Bill', '/Page1/page102'),
        getItem('Alex', '/Page1/page103'),
    ]),
    getItem('Team', '/Page2', <TeamOutlined />, [
        getItem('Team 1', '/Page2/page201'),
        getItem('Team 2', '/Page2/page202')
    ]),
];


const CompMenu: React.FC = () => {
    const navigateTo = useNavigate()
    const paramName = useLocation();
    const currentPath = paramName.pathname
    const parentPath = currentPath.substring(0, currentPath.lastIndexOf("/"));
    console.log(parentPath, 'parentPath')
    const menuClick = (e: { key: string }) => {
        // console.log('跳转')
        // console.log(e, 'e')
        navigateTo(e.key)
    }
    const [openKeys, setOpenKeys] = useState([parentPath]);
    const onOpenChange: MenuProps['onOpenChange'] = (keys: string[]) => {
        console.log(keys, 'keys')
        setOpenKeys([keys[keys.length - 1]])
    };
    return (
        <Menu
            theme="dark"
            defaultSelectedKeys={[paramName.pathname]}
            mode="inline"
            items={items}
            openKeys={openKeys}
            onClick={menuClick}
            onOpenChange={onOpenChange}
        />
    )
}

export default CompMenu